CSS選擇器有分很多種而使用正確的選擇器能夠幫我們快速指定想要的元素，今天我就來講講CSS選擇器常用的大致上有哪些。

CSS中常用的選擇器可以分為以下類型:

1. 基礎選擇器

• 標籤選擇器:直接使用HTML標籤名作為選擇器
• class選擇器:.class名
• id選擇器:#id名

2. 組合選擇器

• 後代選擇器:div p 選擇div內的所有p元素
• 子元素選擇器:div > p 選擇div的直接子元素p
• 相鄰兄弟選擇器:div + p 選擇div後緊接的第一個p元素
• 通用兄弟選擇器:div ~ p 選擇div後所有p元素

3. 屬性選擇器

• [attr]選擇帶有某屬性的元素
• [attr=value]選擇屬性值為某值的元素
• [attr~=value]選擇屬性值包含某詞彙的元素

4. 其他

• * 選擇所有元素
• :not() 排除某些元素

其中屬性選擇器有多個相似但不同的選擇方式分別是:

1. [attr~=value] 匹配屬性值中包含指定詞彙的元素

例如:[title~=flower] 選擇標題中包含flower的元素

2. [attr*=value] 匹配屬性值中包含指定值的元素

例如:[name*=fox] 選擇name包含fox的元素

注意，上面兩個的區別是[attr~=value]指定的詞彙必須與其他值要有空格隔開，但[attr*=value]不需要只要有包含該值即可。

比方說CSS樣式為

/* 第一個 */
[class*='flow'] {
    background-color: aqua;
}
/* 第二個 */
[class~='flow'] {
    background-color: yellow;
}

HTML為

<ul>
    <li class=flow>這是1的樣式(兩個都會被匹配到但被第二個取代掉了)</li>　
    <li class=flower>這是2的樣式(只有第一個CSS匹配到)</li>
</ul>

3. [attr|=value] 匹配屬性值為指定值開頭加上'-'字元的元素

例如:[lang|=en] 選擇lang="en-..."的元素，"..."為任意值

4. [attr^=value] 匹配屬性值以指定值開頭的元素

例如:[href^=#] 選擇href以#開頭的元素

5. [attr$=value] 匹配屬性值以指定值結尾的元素

例如:[href$=.pdf] 選擇href結尾為.pdf的元素

6. [attr operator value i] 屬性不區分大小寫匹配

例如:[href^="HttP" i] 選擇href以http開頭的元素，且不區分大小寫

7. [attr operator value s] 屬性區分大小寫匹配

例如:[lang~=en-us s] 選擇lang以en-us詞彙開頭的元素，且區分大小寫

總結一下區別:

~ 包含詞彙
* 包含值
| 以值加上'-'開頭
^ 以值開頭
$ 以值結尾
i 區分大小寫
s 不區分大小寫

通過靈活組合使用各種選擇器,可以實現對頁面元素精確而高效的控制。

更多選擇器可參考官方MDN文檔